<template>
  <div class="mdhtml" v-html="mdhtml"></div>
</template>

<script>
import Clipboard from "clipboard";
import 'highlight.js/styles/atom-one-dark-reasonable.css'  //导入代码高亮样式
export default {
  data() {
    return {
      mdhtml: "",
      clipboard: "",
    };
  },
  methods: {
    // md渲染
    translate() {
      const MarkdownIt = require("markdown-it");
      const hljs = require("highlight.js");
      const md = new MarkdownIt({
        html: true,
        linkify: true,
        typographer: true,
        highlight: function (str, lang) {
          // 当前时间加随机数生成唯一的id标识
          const codeIndex =
            parseInt(Date.now()) + Math.floor(Math.random() * 10000000);
          // 复制功能主要使用的是 clipboard.js
          let html = `<button class="copy-btn" type="button" data-clipboard-action="copy" data-clipboard-target="#copy${codeIndex}">复制</button>`;
          const linesLength = str.split(/\n/).length - 1;
          // 生成行号
          let linesNum = '<span aria-hidden="true" class="line-numbers-rows">';
          for (let index = 0; index < linesLength; index++) {
            linesNum = linesNum + "<span></span>";
          }
          linesNum += "</span>";
          if (lang && hljs.getLanguage(lang)) {
            try {
              // highlight.js 高亮代码
              const preCode = hljs.highlight(lang, str, true).value;
              html = html + preCode;
              if (linesLength) {
                html += '<b class="name">' + lang + "</b>";
              }
              // 将代码包裹在 textarea 中
              return `<pre class="hljs"><code>${html}</code>${linesNum}</pre><textarea style="position: absolute;top: -9999px;left: -9999px;z-index: -9999;" id="copy${codeIndex}">${str.replace(
                /<\/textarea>/g,
                "&lt;/textarea>"
              )}</textarea>`;
            } catch (error) {
              console.log(error);
            }
          }

          const preCode = md.utils.escapeHtml(str);
          html = html + preCode;
          // 将代码包裹在 textarea 中
          return `<pre class="hljs"><code>${html}</code>${linesNum}</pre><textarea style="position: absolute;top: -9999px;left: -9999px;z-index: -9999;" id="copy${codeIndex}">${str.replace(
            /<\/textarea>/g,
            "&lt;/textarea>"
          )}</textarea>`;
        },
      });
      this.mdhtml = md.render(this.content);
    },
  },
  mounted() {
    this.translate();
    this.$nextTick(() => {
      this.clipboard = new Clipboard(".copy-btn");
      // 复制成功失败的提示
      this.clipboard.on("success", (e) => {
        this.$message.success("复制成功");
      });
      this.clipboard.on("error", (e) => {
        this.$message.error("复制成功失败");
      });
    });
  },
  watch: {
    content: function () {
      this.translate();
    },
  },
  props: {
    content: "",
  },
  destroyed() {
    this.clipboard.destroy();
  },
};
</script>

<style lang="less" scoped>
.mdhtml {
  margin: 0 !important;
  padding: 0 !important;
  font-size: 18px;
}


</style>